<template>
    <el-form :model="questionInfo" label-position="top" v-loading="loading" ref="formRefs" :rules="rules">
        <el-row :gutter="30">
            <el-col :span="12">
                <el-form-item :label="$t('question.edit.category')" prop="question_cate_id" size="large">
                    <el-tree-select
                        :placeholder="$t('question.edit.category_placeholder')"
                        v-model="questionInfo.category_id"
                        :data="questionCateList"
                        :render-after-expand="false"
                        :props="quizProps"
                        node-key="id"
                        clearable
                    />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item :label="$t('question.edit.point')" prop="question_point" size="large">
                    <el-input v-model="questionInfo.question_point" :placeholder="$t('question.edit.point_placeholder')" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item :label="$t('question.edit.detail')" prop="question_detail" size="large">
                    <RichTextEditor v-model="questionInfo.question_detail" @update-richValue="questionInfo.question_detail = $event" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item :label="$t('question.edit.feedback')" prop="question_feedback" size="large">
                    <RichTextEditor v-model="questionInfo.question_feedback" @update-richValue="questionInfo.question_feedback = $event" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item :label="$t('question.edit.score')" prop="score" size="large">
                    <el-input v-model="questionInfo.score" :placeholder="$t('question.edit.score_placeholder')" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item :label="$t('question.edit.no')" prop="question_no" size="large">
                    <el-input v-model="questionInfo.question_no" :placeholder="$t('question.edit.no_placeholder')" />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item :label="$t('question.edit.type')" prop="question_type">
                    <el-switch
                        v-model="questionInfo.question_type"
                        :active-value="1"
                        :inactive-value="2"
                        :active-text="$t('question.edit.type_single')"
                        :inactive-text="$t('question.edit.type_multi')"
                    />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <!-- <el-form-item :label="$t('question.edit.show_range')" prop="is_range" size="large">
                    <el-switch :active-value="1" :inactive-value="2" />
                </el-form-item> -->
            </el-col>
            <el-col :span="6">
                <!-- <el-form-item :label="$t('question.edit.random')" prop="is_range">
                    <el-switch v-model="questionInfo.is_range" :active-value="1" :inactive-value="2" />
                </el-form-item> -->
            </el-col>
            <el-col :span="6">
                <el-form-item :label="$t('question.edit.show_right')" prop="is_range">
                    <el-switch v-model="questionInfo.answer_feedback.show_right" :active-value="1" :inactive-value="0" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item :label="$t('question.edit.feedback_right')" prop="answer_feedback.right" size="large">
                    <RichTextEditor v-model="questionInfo.answer_feedback.right" @update-richValue="questionInfo.answer_feedback.right = $event" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item :label="$t('question.edit.feedback_fail')" prop="answer_feedback.fail" size="large">
                    <RichTextEditor v-model="questionInfo.answer_feedback.fail" @update-richValue="questionInfo.answer_feedback.fail = $event" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-card v-for="(answer, index) in questionInfo.answer" :key="answer.id">
            <el-row :gutter="30">
                <el-col :span="12">
                    <el-form-item
                        :label="$t('question.edit.option', { n: index + 1 })"
                        :prop="`answer.${index}.answer_text`"
                        size="large"
                        :rules="{ required: true, message: $t('question.edit.option_placeholder'), trigger: 'blur' }"
                    >
                        <RichTextEditor v-model="answer.answer_text" @update-richValue="answer.answer_text = $event" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="$t('question.edit.option_feedback')" :prop="`answer.${index}.answer_feedback`" size="large">
                        <RichTextEditor v-model="answer.answer_feedback" @update-richValue="answer.answer_feedback = $event" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item
                        :label="$t('question.edit.option_score')"
                        :prop="`answer.${index}.answer_score`"
                        size="large"
                        :rules="{ required: true, message: $t('question.edit.option_score_placeholder'), trigger: 'blur' }"
                    >
                        <el-input v-model="answer.answer_score" :placeholder="$t('question.edit.option_score_placeholder')" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-card>

        <el-form-item>
            <div class="btn-list">
                <el-button color="#f06423" @click="handleSave(false)">{{ $t('golbal.btn_text_1') }}</el-button>
                <el-button color="#f06423" @click="handleSave(true)">{{ $t('golbal.btn_text_2') }}</el-button>
                <el-button color="#f06423" @click="router.go(-1)">{{ $t('golbal.btn_text_3') }}</el-button>
            </div>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { onMounted, ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import type { FormInstance } from 'element-plus'

import RichTextEditor from '@/components/RichTextEditor.vue'

import QuestionService from '@/api/question'
import type { CateItem, QuestionAnswerItem, QuestionCreateItem } from '@/types/question'

import { useI18n } from 'vue-i18n'
import type { SupportedLocales } from '@/locales/i18n'
import type { MessageSchema } from '@/types/i18n'

const route = useRoute()
const router = useRouter()
const id = computed(() => Number(route.params.id))
const loading = ref(false)
const editLoading = ref(false)
const { t } = useI18n<{ message: MessageSchema }, SupportedLocales>()

// 頁面信息
const questionInfo = ref<QuestionCreateItem>({
    category_id: null,
    question_point: '',
    question_detail: '',
    question_feedback: '',
    score: '1',
    question_no: '',
    is_range: 1,
    question_type: 1,
    answer: [
        {
            id: 1,
            answer_text: '',
            answer_feedback: '',
            answer_score: 0,
        },
        {
            id: 2,
            answer_text: '',
            answer_feedback: '',
            answer_score: 0,
        },
        {
            id: 3,
            answer_text: '',
            answer_feedback: '',
            answer_score: 0,
        },
        {
            id: 4,
            answer_text: '',
            answer_feedback: '',
            answer_score: 0,
        },
    ],
    answer_feedback: {
        fail: '',
        right: '',
        show_right: 0,
    },
})
function getQuestionInfo() {
    loading.value = true
    QuestionService.getById(id.value)
        .then(res => {
            if (id.value) {
                const { id, category_id, question_point, question_detail, question_feedback, score, question_no, is_range, question_type, answer, answer_feedback } = res
                questionInfo.value = { id, category_id, question_point, question_detail, question_feedback, score, question_no, is_range, question_type, answer, answer_feedback }
            }
        })
        .finally(() => {
            loading.value = false
        })
}

// 表單行為
const formRefs = ref<FormInstance>()
const rules = {
    category_id: [{ required: true, message: t('question.edit.validate.category_required') }],
    question_point: [{ required: true, message: t('question.edit.validate.point_required') }],
    question_detail: [{ required: true, message: t('question.edit.validate.detail_required') }],
    question_feedback: [{ required: true, message: t('question.edit.validate.feedback_required') }],
    score: [{ required: true, message: t('question.edit.validate.score_required') }],
    question_no: [{ required: true, message: t('question.edit.validate.no_required') }],
    is_range: [{ required: true, message: t('question.edit.validate.is_range_required') }],
    question_type: [{ required: true, message: t('question.edit.validate.type_required') }],
    answer_feedback: {
        fail: [{ required: true, message: t('question.edit.validate.feedback_fail_required') }],
        right: [{ required: true, message: t('question.edit.validate.feedback_right_required') }],
    },
}
const handleSave = (isSaveAndReturn: boolean) => {
    formRefs.value?.validate(valid => {
        if (valid) {
            loading.value = true
            if (id.value) {
                QuestionService.update(questionInfo.value)
                    .then(() => {
                        if (isSaveAndReturn) router.go(-1)
                    })
                    .finally(() => {
                        loading.value = false
                    })
            } else {
                QuestionService.create(questionInfo.value)
                    .then(res => {
                        if (isSaveAndReturn) {
                            router.go(-1)
                        } else {
                            questionInfo.value.id = res.id
                            router.replace({
                                name: 'questionEdit',
                                params: { id: res.id },
                            })
                        }
                    })
                    .finally(() => {
                        loading.value = false
                    })
            }
        }
    })
}

// 题库分类列表
const questionCateList = ref<CateItem[]>([])
const quizProps = {
    id: 'id',
    children: 'children',
    label: 'name',
}
function getQuestionCateList() {
    QuestionService.cateList().then(res => {
        questionCateList.value = res.items
    })
}

onMounted(() => {
    getQuestionCateList()
    if (id.value) getQuestionInfo()
})
</script>

<style lang="less" scoped>
.el-form {
    .el-form-item {
        p {
            margin-top: 4px;
            font-size: 12px;
            color: #4c4c4c;
            line-height: 1.2;
        }

        :deep(.el-input) {
            width: 100%;
        }

        .btn-list {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
        }
    }
}

:deep(.el-card) {
    margin-bottom: 30px;
}

:deep(.ck-editor) {
    width: 100%;

    .ck-editor__main {
        .ck-content {
            height: 200px;
        }
    }
}
</style>
